<template>
  <div id="InstitutionalDetail">
    <div class="homeTitle">机构\行社信息详情</div>
    <div class="tablelist">
      <table class="lastTable">
        <tr>
          <td class="tdLeft">
            地市
          </td>
          <td>
            {{data.city}}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            机构\行社名称
          </td>
          <td>
            {{data.bankName}}
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            <span class="bitian">*</span>注册资本金(万元)
          </td>
          <td>
            <el-input v-model="data.money" placeholder="请输入" size="small"></el-input>
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            <span class="bitian">*</span>地址
          </td>
          <td>
            <el-input v-model="data.address" placeholder="请输入" size="small"></el-input>
          </td>
        </tr>
        <tr>
          <td class="tdLeft">
            <span class="bitian">*</span>监管评级
          </td>
          <td>
            <el-select v-model="data.supervisionRating" placeholder="请选择" size="small">
              <el-option
                v-for="item in pingjiOption"
                :key="item"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </td>
        </tr>
        
        
      </table>
    </div>
    <div class="btn">
      <el-button type="primary" size="small" @click="submit">提交</el-button>
      <el-button type="primary" size="small" @click="cancel">关闭</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "InstitutionalDetail",
  data() {
    return {
      pingjiOption: ['1','2A','2B','2C','3A','3B','3C','4A','4B','4C','5','6'],
      data: ''
    };
  },
  mounted () {
    this.getdata();
  },
  methods: {
    getdata () {
      this.axios.get('institutionalInformation/selectById',{params:{id: this.$route.query.id}})
        .then(({data})=> {
          if (data.code == 200) {
            this.data = data.data;
          }
        })
    },
    submit() {
      // this.$router.go(-1);
      let information = {
        id: this.$route.query.id,
        supervisionRating: this.data.supervisionRating,
        money: this.data.money,
        address: this.data.address
      }
      for (let k in information) {
        if (!information[k]) {
           this.$message({message: '请您填写完整',type: 'warning'});
           return false;
        }
      }
      this.axios.post('institutionalInformation/update',{information})
        .then(({data})=> {
          if (data.code == 200) {
            this.$message({message: '提交成功',type: 'success'});
            this.$router.go(-1);
          }
        })
    },
    cancel() {
      this.$router.go(-1);
    },
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    }
  }
};
</script>

<style lang="scss">
#InstitutionalDetail {
  .tablelist {
    margin-top: 30px;
    table {
      border: 1px solid white;
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 50px;
      tr {
        td {
          text-align: center;
          padding: 5px 10px;
          border-right: 1px solid white;
          border-bottom: 1px solid white;
          &:first-child {
            background: #343839;
            color: white;
            width: 30%;
            .bitian {
              color: red;
            }
          }
          &:last-child {
            background: #7a7a73;
            color: white;
            text-align: left;
          }
          .el-select {
            width: 100%;
          }
          &.fourS {
            // display: flex;
            // justify-content: space-between;
            .el-select {
              width: 18%;
            }
          }
          .el-tag {
            background: white;
            margin-right: 20px;
            margin-bottom: 10px;
            .el-icon-close {
              background-color: red;
              color: white;
            }
          }
        }
      }
    }
    .lastTable {
      margin-bottom: 0px;
      .tdLeft {
        width: 30%;
      }
      td {
        width: 70%;
         &.fourS {
          .el-select {
            width: 18%;
          }
          .el-button {
            // margin-left: 25px;
          }
        }
      }

    }
    tr {
      td {
        text-align: center;
        padding: 5px 10px;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        &:first-child {
          background: #343839;
          color: white;
          width: 30%;
          .bitian {
            color: red;
          }
        }
        &:last-child {
          background: #7a7a73;
          color: white;
          text-align: left;
        }
        .el-select {
          width: 100%;
        }
      }
    }
  }
  .btn {
    text-align: center;
    margin-top: 20px;
  }
}
</style>
